<template>
  <div class="feedback">
    <div class="questionType">
      <div class="questionTitle">
        <span class="questionName">{{ $t("feedback.questionType") }}</span>
      </div>
      <div class="singleBtn" ref="single" @click="switchStatus">
        <div class="dysfunction active">{{ $t("feedback.dysfunction") }}</div>
        <div class="suggest">{{ $t("feedback.suggest") }}</div>
        <div class="another">{{ $t("feedback.other") }}</div>
      </div>
    </div>
    <div class="userInput">
      <div class="suggestYouradvise">
        <span class="questionName">{{ $t("feedback.describe") }}</span>
      </div>
      <div class="input">
        <van-cell-group>
          <van-field
            v-model.trim="questionText"
            rows="5"
            autosize
            type="textarea"
            maxlength="300"
            show-word-limit
            :placeholder="$t('feedback.fieldPlaceholder')"
          >
          </van-field>
        </van-cell-group>
      </div>
    </div>
    <div class="submit">
      <van-button round type="info" :disabled="canSubmit" @click="submit">
        {{ $t("submit") }}
      </van-button>
    </div>
  </div>
</template>

<script>
import { Field, CellGroup, Button } from 'vant';
import 'vant/lib/field/style/less';
export default {
    name: 'feedback',
    components: {
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Button.name]: Button
    },
    data () {
        return {
            questionText: '',
            questionType: ''
        };
    },
    computed: {
        canSubmit () {
            return this.questionText.length === 0;
        }
    },
    methods: {
        submit () {
            // 提交反馈逻辑
            const data = {
                feedType: this.questionType,
                questionText: this.questionText,
                userId: localStorage.getItem('id')
            };
            this.$api.feedbackApi
                .feedback(data)
                .then(res => {
                    if (res.code === 20001) {
                        this.questionText = '';
                        this.$util.successToast(this.$t('feedback.feedbackSuccess'));
                    } else {
                        throw new Error(this.$t('feedback.failure'));
                    }
                })
                .catch(error => this.$util.failToast(error.message));
        },
        switchStatus (event) {
            this.questionType = event.target.textContent;
            if (event.target.className !== 'singleBtn') {
                this.$util._clearClassName(this.$refs.single);
                event.target.className = 'active';
            }
        }
    },
    created () {
        this.questionType = this.$t('feedback.dysfunction');
    }
};
</script>

<style scoped lang="less" src="./less/feedback.less"></style>
